<template>
  <div class="courseDetails">
    <div class="all">
      <div class="btn-box">
        <!--<div class="evaluate text" @click="sendData(1)">
          评价
        </div>-->
        <div class="getData text" @click="sendData(2)">
          资料
        </div>
        <!--<div class="discuss text" @click="sendData(3)">
          讨论
        </div>-->
      </div>

      <!--视频-->
      <div ref="video" class="video">
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
          @play="onPlay($event)"
          @playing="onPlaying($event)"
          @pause="onPause($event)"
          @ended="onEnded($event)"
          @statechanged="onStateChanged($event)">
        </video-player>
      </div>


      <CourseData v-bind:c="course"></CourseData>
      <div v-if="adFlag" class="ad" @click="gotoAd()">
        我 不 是 广 告
      </div>
    </div>
  </div>
</template>

<script>
  import CourseData from "@/components/course/CourseData"
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'

  export default {
    //https://wyxjava.oss-cn-shanghai.aliyuncs.com/1256640517379330048.mp4
    name: "",
    components: {
      CourseData, videoPlayer
    },
    data() {
      return {
        //课时id
        cid: this.$route.query.cid,
        events:{},
        playerOptions: {
          //播放速度
          playbackRates: [0.9, 1.0, 1.1, 1.2, 1.5, 2.0, 3.0],
          //如果true,浏览器准备好时开始回放。
          autoplay: false,
          // 默认情况下将会消除任何音频。
          muted: false,
          // 导致视频一结束就重新开始。
          loop: false,
          // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          preload: 'auto',
          language: 'zh-CN',
          // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          aspectRatio: '16:9',
          // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          fluid: true,
          sources: [{
            //类型
            type: "video/mp4",
            //url地址
            src: ''
          }],
          //你的封面地址
          //TODO
          poster: "/static/java.png", //你的封面地址
          //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          // notSupportedMessage: '此视频暂无法播放，请稍后再试',
          notSupportedMessage: '此视频加载中，请稍等...',
          controlBar: {
            //计时器
            timeDivider: true,
            //持续时间显示
            durationDisplay: true,
            //剩余时间显示
            remainingTimeDisplay: false,
            //全屏按钮
            fullscreenToggle: true
          }
        },
        //课时信息
        course: {
          courseId: "",
          courseName: "",
          subjectId: "",
          chapterId: "",
          showOrder: "",
          status: "",
          courseDetails: {
            courseDetailsId: "",
            courseId: "",
            courseUrl: "",
            courseTime: "",
            courseSize: "",
            courseView: "",
            courseScore: "",
            courseTotal: "",
            status: "",
            vip: ""
          }
        },
        //广告开关
        adFlag: false
      }
    },
    methods: {
      //跳转广告页面
      gotoAd: function () {
        window.open("https://www.shsxt.com/brand.html?from=baidu#jzl_kwd=104529733384&jzl_ctv=26182675028&jzl_mtt=1&jzl_adt=cl1&jzl_ch=11&jzl_act=22970882&jzl_cpg=95806705&jzl_adp=3616831468&jzl_sty=10&jzl_dv=1&renqun_youhua=1891033&bd_vid=10831222667990206584", '_blank');
      },
      //视频播放回调
      onPlay: function (event) {
        //视频播放时移除广告窗口
        this.adFlag = false;
      },
      //暂停或者开始之后都会执行
      onPlaying: function (event) {
      },
      //暂停
      onPause: function (event) {
        //视频播放时弹出广告窗口
        this.adFlag = true;
      },
      //结束
      onEnded: function (event) {
      },
      //视频正在播放
      onStateChanged: function (event) {

      },
      //发送信息给 CourseData 组件
      sendData: function (type) {
        this.course.type = type
        this.Bus.$emit("my-event-course", this.course);
      },
      //点击切换播放速度
      onRatechange: function (e) {
        console.log(1);
      },
      //获取课时信息
      getCourseInfo() {

        this.axios.get(`/course/course/course/details/${this.cid}`)
          .then((resp) => {
            if (resp.data.flag) {
              this.course = resp.data.data;

              //设置视频播放来源
              this.playerOptions.sources[0].src = this.course.courseDetails.courseUrl
            }
          })
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    mounted() {
      this.getCourseInfo();
    }
  }
</script>

<style scoped>
  .courseDetails {
  }

  /*反馈 资料 讨论*/
  .courseDetails .btn-box {
    position: absolute;
    z-index: 10;
    top: 80px;
    right: 10px;
  }

  .courseDetails .all .btn-box .text {
    line-height: 40px;
    font-size: 16px;
    color: #FFF;
    font-family: "Arial";
    border-radius: 4px;
    text-align: center;
  }

  /*反馈 资料  讨论*/
  .courseDetails .all .btn-box .evaluate,
  .courseDetails .all .btn-box .getData,
  .courseDetails .all .btn-box .discuss {
    width: 80px;
    height: 40px;
    margin-bottom: 10px;
  }

  .courseDetails .all .btn-box .evaluate {
    background-color: #e38636;
  }

  .courseDetails .all .btn-box .getData {
    background-color: #15c05b;
  }

  .courseDetails .all .btn-box .discuss {
    background-color: #d872a2;
  }

  .courseDetails .video {
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  .courseDetails .ad {
    position: fixed;
    z-index: 10000;
    width: 660px;
    height: 330px;
    background-color: #57ff80;
    border-radius: 12px;
    top: 250px;
    /* 50% -(width/2)*/
    left: calc(50% - 330px);

    text-align: center;
    line-height: 330px;
    font-size: 32px;
    color: #F20A0A;
  }

</style>
